<template>
  <div>

    <button @click="change">显示/隐藏</button>

    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
    >
      <h1 v-show="showFlag" :key="1">测试动画效果</h1>
      <h1 v-show="showFlag" :key="2">测试动画效果</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css';

export default {
  name: "Test2",
  data() {
    return {
      showFlag: true,
    }
  },
  methods: {
    change() {
      this.showFlag = !this.showFlag
    }
  }

}
</script>

<style scoped>

</style>